<template>
  <div class="login-container columnCC">
    <!-- ref 为了获取这个表单 -->
    <el-form ref="ruleFormRef" class="login-form" :model="subForm" :rules="formRules">
      <div class="title-container">
        <h3 class="title text-center">考试后台管理系统</h3>
      </div>
      <!-- prop 字段验证 -->
      <el-form-item prop="userName">
        <div class="rowSC flex-1">
          <el-input v-model="subForm.userName" placeholder="用户名(admin)" />
        </div>
      </el-form-item>
      <el-form-item prop="password">
        <div class="rowSC flex-1">
          <el-input :key="passwordType" ref="refPassword" v-model="subForm.password" :type="passwordType"
            name="password" placeholder="password(123456)" />
        </div>
      </el-form-item>
      <el-button :loading="subLoading" type="primary" class="login-btn" size="default" @click.prevent="handleLogin">
        Login
      </el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { login } from '@/api/user'
import { ElMessage, type FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'

// 创建路由实例
const router = useRouter()

// 登录表单
const subForm = ref({
  userName: "",
  password: "",
  remember: true
})

// 登录验证规则
const formRules = ref({
  userName: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
})

// 加载层
const subLoading = ref(false)

// 展示密码
const passwordType = ref<"password" | "text">("password")

// 展示密码的操作
function showPwd() {
  if (passwordType.value == "password") {
    passwordType.value = "text"
  } else {
    passwordType.value = "password"
  }
}

// 获取el-form组件
const ruleFormRef = ref<FormInstance | undefined>()

// 登录的功能
async function handleLogin() {
  // .validate 验证
  await ruleFormRef.value?.validate(valid => {
    // valid 是否成功字段
    if (valid) {
      subLoading.value = true
      // console.log(subForm);
      login(subForm.value).then(res => {
        if (res.code == 1) {
          // 提示
          ElMessage({
            message: '登录成功',
            type: 'success',
          })
          // 跳转
          router.push("/")
        } else {
          ElMessage({
            message: res.message,
            type: 'error',
          })
        }
      }).finally(() => {
        subLoading.value = false
      })
    }
  })

}
</script>

<style lang="scss" scoped>
.rowSC {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  height: 100vh;
  width: 100%;
  background-color: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-form {
    margin-bottom: 20vh;
    width: 360px;
  }

  .title-container {
    .title {
      font-size: 22px;
      color: #eee;
      margin: 0 auto 25px auto;
      text-align: center;
      font-weight: bold;
    }
  }
}

.svg-container {
  padding-left: 6px;
  color: $dark_gray;
  text-align: center;
  width: 30px;
}

//错误提示信息
.tip-message {
  color: #e4393c;
  height: 30px;
  margin-top: -12px;
  font-size: 12px;
}

//登录按钮
.login-btn {
  width: 100%;
  margin-bottom: 30px;
}

.show-pwd {
  width: 50px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  text-align: center;
}
</style>

<style lang="scss">
//css 样式重置 增加个前缀避免全局污染
.login-container {
  .el-input__wrapper {
    background-color: transparent;
    box-shadow: none;
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }

  .el-input input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 10px 5px 10px 15px;
    color: #fff;
    height: 42px; //此处调整item的高度
    caret-color: #fff;
  }

  //hiden the input border
  .el-input__inner {
    box-shadow: none !important;
  }
}
</style>
